<template>
  <div class="container">
    <el-dialog title="修改密码" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
      <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="120px" class="common-dialog-height">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="dataForm.oldPass" type="password" placeholder="请输入旧密码" width="200px" clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="dataForm.newPass" type="password" placeholder="请输入旧密码" width="200px" clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="againPass">
          <el-input v-model="dataForm.againPass" type="password" placeholder="请输入旧密码" width="200px" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="formDataSubmit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { checkPassword } from '@/utils/validator'
  export default {
    data () {
      var validateOldPassword = (rule, value, callback) => {
        if (!checkPassword(value)) {
          callback(new Error('密码长度为6~16位的数字或英文字母!'))
        } else {
          callback()
        }
      }
      var validateNewPassword = (rule, value, callback) => {
        if (!checkPassword(value)) {
          callback(new Error('密码长度为6~16位的数字或英文字母!'))
        } else if (this.dataForm.oldPass === value) {
          callback(new Error('新密码与旧密码一致!'))
        } else {
          callback()
        }
      }
      var validatePasswordAgain = (rule, value, callback) => {
        if (this.dataForm.newPass !== value) {
          callback(new Error('确认密码与密码输入不一致!'))
        } else {
          callback()
        }
      }
      return {
        dialogVisible: false,
        dataForm: {
          oldPass: '',
          newPass: '',
          againPass: ''
        },
        dataRule: {
          oldPass: [{ validator: validateOldPassword, trigger: 'blur' }],
          newPass: [{ validator: validateNewPassword, trigger: 'blur' }],
          againPass: [{ validator: validatePasswordAgain, trigger: 'blur' }],
        }
      }
    },
    methods: {
      init() {
        this.dialogVisible = true
      },
      formDataSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/base/password'),
              method: 'put',
              data: this.$http.adornData(this.dataForm)
            }).then(response => {
              const result = response.data
              if (result && result.code === 200) {
                this.dialogVisible = false
                this.$message({message: result.msg, type: 'success'})
              } else {
                this.$message({message: result.msg, type: 'error'})
              }
            }).catch(reason => {
              this.$message({message: reason, type: 'error'})
            })
          }
        })
      },
      closeDialog() {
        this.$refs['dataForm'].resetFields()
      }
    }
  }
</script>
<style>
</style>
